<template>
    <div class="head">
        <span>{{ msg }}</span>
        <span>
            <span> <img src="../assets/img/temp.png" alt="" width="30" style="vertical-align: middle;"> {{ wendu.toFixed(1) }} ℃</span>
            <span><img src="../assets/img/battery.png" alt="" width="28" style="vertical-align: middle;">  {{qq}}% </span>
        </span>
    </div>
</template>

<script setup>
import { onMounted,ref } from 'vue';

const props=defineProps({
    wendu:{
        type: Number,
        default: 16.5 
    },
    qq:{
        type: Number,
        default: 99
    },
    msg:{
        type: String,
        default: '???'
    }
})


</script>


<style scoped>
.head{
    display: flex;
    justify-content: space-between;
    padding: 0 0.5em;
    height: 32px;
    background-color: rgba(56,56,56,0.4);
    text-align: center;
    color: aqua;
    box-sizing: border-box;
    width: inherit;
}

</style>